<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate 日期组件功能演示</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../res/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../res/adminui/dist/css/admin.css" media="all">
</head>
<body>


  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>日期时间</cite></a>
    </div>
  </div>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">联动范围选择</div>
          <div class="layui-card-body" pad15>
            <div class="layui-form" wid100>
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">活动日期</label>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-laydate-start" placeholder="开始日期">
                  </div>
                  <div class="layui-form-mid">
                    -
                  </div>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-laydate-end" placeholder="结束日期">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">扩展农历组件</div>
          <div class="layui-card-body" pad15>
            <div class="layui-inline" id="ID-laydate-cell-render"></div>
            <style>
              .laydate-theme-lunar .layui-laydate-main {
                width: auto;
              }
              .laydate-theme-lunar .date-cell-inner {
                padding: 6px;
                width: 44px;
                height: 40px;
                border-radius: 4px !important;
              }
              .laydate-theme-lunar .layui-this {
                border-radius: 4px !important;
              }
              .laydate-theme-lunar .date-cell-inner b {
                display: block;
                font-weight: 400;
                height: 16px;
                font-size: 14px;
              }
              .laydate-theme-lunar .date-cell-inner i {
                display: block;
                font-style: normal;
                font-size: 10px;
              }
              .laydate-theme-lunar .badge {
                position: absolute;
                right: 0px;
                top: 0px;
                background-color: #4e5877;
                color: #fff;
                font-size: 12px;
                line-height: 14px;
                padding: 1px 2px;
                border-radius: 4px;
                text-decoration: none;
                transform: scale(0.7);
              }
              .laydate-theme-lunar .holiday .badge {
                background-color: #eb3333 !important;
              }
              .laydate-theme-lunar .hightlight i {
                color: #1e9fff;
              }
              .laydate-theme-lunar .layui-this .hightlight i {
                color: #fff;
              }
              .laydate-theme-lunar .laydate-month-list > li {
                height: 50px !important;
                line-height: 50px !important;
                width: 24.2% !important;
                margin: 18px 1px !important;
              }
              .laydate-theme-lunar .laydate-year-list > li {
                height: 40px !important;
                line-height: normal !important;
                width: 31.3% !important;
                margin: 8px 2px !important;
              }
              .laydate-theme-lunar .preview-inner>*{
                display: inline-block;
                margin-right: 5px;
                position:relative;
                font-size: 12px;
              }
              .laydate-theme-lunar .preview-inner>.badge{
                margin-right: 0;
              }
            </style>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/lunar-javascript/1.6.12/lunar.min.js"></script>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../../../res/layui/layui.js"></script>
  <script>
  layui.config({
    base: '../../../res/' // 静态资源所在路径
  }).use(['index', 'laydate', 'util'], function(){
    var laydate = layui.laydate;
    var $ = layui.$;
    var util = layui.util;

    /**
     * 联动范围选择
     */

    // 开始日期
    var insStart = laydate.render({
      elem: '#test-laydate-start'
      ,min: 0
      ,done: function(value, date){
        //更新结束日期的最小日期
        insEnd.config.min = lay.extend({}, date, {
          month: date.month - 1
        });

        //自动弹出结束日期的选择器
       insEnd.config.elem[0].focus();
      }
    });
    // 结束日期
    var insEnd = laydate.render({
      elem: '#test-laydate-end'
      ,min: 0
      ,done: function(value, date){
        //更新开始日期的最大日期
        insStart.config.max = lay.extend({}, date, {
          month: date.month - 1
        });
      }
    });

    /**
     * 扩展农历组件
     */
    laydate.render({
      elem: '#ID-laydate-cell-render',
      position: 'static',
      // value: '2024-03-30',
      isPreview: false,
      btns: ['now'],
      theme: 'lunar',
      autoConfirm: false,
      ready: function (date) {
        if (!this._previewEl) {
          var key = this.elem.attr('lay-key');
          var panelEl = $('#layui-laydate' + key);
          this._previewEl = panelEl.find('.layui-laydate-preview');
          this.cellRender(date);
        }
      },
      change: function(value, date) {
        this.cellRender(date);
      },
      onNow: function(value, date) {
        this.cellRender(date);
      },
      cellRender: function (ymd, render, info) {
        var that = this;
        var y = ymd.year;
        var m = ymd.month;
        var d = ymd.date;
        var lunarDate = Solar.fromYmd(y, m, d).getLunar();
        var lunar = lunarDate.getDayInChinese();
        var jieQi = lunarDate.getJieQi();
        var holiday = HolidayUtil.getHoliday(y, m, d);
        var displayHoliday = holiday && holiday.getTarget() === holiday.getDay() ? holiday.getName() : undefined;
        var displayHolidayBadge = holiday && holiday.getTarget() ? (holiday.isWork() ? '班' : '休') : undefined;
        var isHoliday = holiday && holiday.getTarget() && !holiday.isWork();
        // 在预览区显示自定义农历相关信息
        if (that._previewEl && (!info || (info && info.type === "date"))) {
          var holidayBadgeStyle = [
            'color:#fff',
            'background-color:' + (isHoliday ? '#eb3333' : '#333'),
            'display:' + (displayHolidayBadge ? 'inline-block' : 'none')
          ].join(';')
          var festivalBadgeStyle = [
            'color:#fff',
            'background-color:#1e9fff',
            'display:' + (displayHoliday || jieQi ? 'inline-block' : 'none')
          ].join(';')
          var tipsText = [
            '<div class="preview-inner">',
              '<div style="color:#333;">农历' + lunarDate.getMonthInChinese() + '月' + lunarDate.getDayInChinese() + '</div>',
              '<div style="font-size:10px">' + lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao() + '年</div>',
              '<div style="font-size:10px">' + lunarDate.getMonthInGanZhi() + '月 ' + lunarDate.getDayInGanZhi() + '日</div>',
              '<div class="badge" style="' + holidayBadgeStyle  +'">' + displayHolidayBadge + '</div>',
              '<div class="badge" style="'+ festivalBadgeStyle +'">' + (displayHoliday || jieQi) + '</div>',
            '</div>'
          ].join('');
          that._previewEl.html(tipsText);
        };
        if (!render) return;
        // 面板类型
        if (info.type === 'date') {
          var clazz = [
            'date-cell-inner',
            isHoliday ? 'holiday' : '',
            displayHoliday || jieQi ? 'hightlight' : '',
          ].join(' ');
          var content = [
            '<div class="' + clazz + '">',
              '<b>' + d + '</b>',
              '<i>' + (displayHoliday || jieQi || lunar) + '</i>',
              displayHolidayBadge ? '<u class="badge">' + displayHolidayBadge + '</u>' : '',
            '</div>',
          ].join('');
          // render(content)
          // render($(content)[0])
          var contentEl = $(content);
          contentEl.on('contextmenu', function (e) {
            e.preventDefault();
            layer.tips(lunarDate.toString(), this, {
              tips: [1, '#16baaa'],
              zIndex: 999999999,
            });
          });
          render(contentEl);
        } else if (info.type === 'year') {
          var lunarDate = Lunar.fromDate(new Date(y + 1, 0));
          var lunar = lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao();
          render([
            y + '年',
            '<div style="font-size:12px">' + lunar + '年</div>',
          ].join(''));
        } else if (info.type === 'month') {
          var lunar = lunarDate.getMonthInChinese();
          render([m + '月(' + lunar + '月)'].join(''));
        }
      }
    });

  });
  </script>
</body>
</html>
